@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

.page07{
    position: relative;
    overflow:hidden;
    background: url(../img/page07-03.jpg) ;
    background-position: center;
    .page07-shadow{
        img{
            position:absolute;
            width:100%;
            height:295px;
            top:-295px;;
        }
    }
    .content-border{
        @extend .position-margin;
        top:200px;
        width:600px;
        height:270px;
        .page07-title{
            p{
                width:100%;
                color:white;
                font-size: 14px;
                position:absolute;
                background:black;
                height:25px;
                line-height: 25px;
                text-indent: 20px;
                left:-100%;
                opacity: 0;
            }
        }
        .page07-daughter{
            img{
               @extend .position-margin;
//             left:-125px; 
               left:100%;
               top:-90px;
               transform: rotateZ(-10deg);
               opacity: 0;
            }          
        }
        .page07-btn{
            img{
                @extend .position-margin;
                bottom:0;
                left:-256px;
                opacity: 0;
                
            }
        }
        .page07-btn2{
            img{
                @extend .position-margin;
                bottom:0;
                left:-256px;
                opacity: 0;
            }
        }
        .page07-pointer{
            img{
               @extend .position-margin;
               bottom:26px;
//             left:50px; 
                left:100%;
                opacity: 0;
            }
        }
        .page07-pointer2{
            img{
               @extend .position-margin;
               bottom:26px;
               left:50px; 
               opacity: 0;

            }
        }
    }
    
    
}



.page07.active{
    .page07-shadow{
        img{
            animation: page07-shadow 1.4s ease 500ms forwards;
        }
    }
    .content-border{
        .page07-title{
            p{
                animation: page07-title 600ms ease 300ms forwards;
            }
        }
        .page07-daughter{
            img{
                animation: page07-daughter 800ms ease 400ms forwards;
            }          
        }
        .page07-btn{
            img{
                animation: page07-btn 800ms ease 1.5s forwards;
            }
        }
        .page07-btn2{
            img{
                animation: page07-btn2 600ms ease 2.6s infinite;
            }
        }
        .page07-pointer{
            img{
                animation: page07-pointer 600ms ease 2.6s forwards;
            }
        }
        .page07-pointer2{
            img{
                animation: page07-pointer2 100ms ease 3.1s infinite;
            }
        }
    }
    
    
}


//shadow
@keyframes page07-shadow{
    from{}to{top:0;}
}
//shadow

//title
@keyframes page07-title{
    0%{opacity: 1;}
    33%{left:20px;opacity: 1;}
    66%{left:-10px;opacity: 1;}
    100%{left:0;opacity: 1;}
}
//title

//daughter
@keyframes page07-daughter{

    33%{left:-145px;opacity: 1;}
    66%{left:-115px;opacity: 1;}
    100%{left:-125px;opacity: 1;}
}
//daughter

//btn
@keyframes page07-btn{
    0%{opacity: 1;}
    20%{transform: scale(1.1);opacity: 1;}
    40%{transform: scale(0.9);opacity: 1;}
    60%{transform: scale(1.1);opacity: 1;}
    80%{transform: scale(0.9);opacity: 1;}
    100%{transform: scale(1);opacity: 1;}
}
//btn

//btn2
@keyframes page07-btn2{
    0%{opacity: 1;}
    15%{
        transform: rotateZ(5deg) scale(1.1);opacity: 1;
    }
    30%{
        transform: rotateZ(-5deg) scale(1.1);opacity: 1;
    }
    45%{
        transform: rotateZ(5deg) scale(1.1);opacity: 1;
    }
    60%{
        transform: rotateZ(-5deg) scale(1.1);opacity: 1;
    }
    100%{transform: rotateZ(0deg) scale(1);opacity: 1;}
}
//btn2

//pointer
@keyframes page07-pointer{
    
    33%{left:0px;opacity: 1;}
    66%{left:60px;opacity: 1;}
    100%{left:50px;opacity: 1;}
}
//pointer

//pointer2
@keyframes page07-pointer2{
    
    50%{left:48px;opacity: 0.8;}
    100%{left:54px;opacity: 1;}
}
//pointer2
